<!-- 评价列表 -->
<template>
	<view class="zg-area">
		<view class="fixed-tool-top" v-if="list1.length > 0">
			<view class="fixed-tags">
				<view class="fixed-tag" :class="{active: currentIndex1 === index }" v-for="(item,index) in list1" :key="index"
				 @click="selectTag(item,index)">
					{{item.value}}
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 评论 -->
			<view class="pl-content" v-if="list.length > 0">
				<view class="pl-row" v-for="(item, index) in list" :key="index">
					<view class="pl-top">
						<view class="pl-left flex-1">
							<view class="pl-left-img">
								<image class="tp-br50" :src="/^[http | https]/.test(item.customerAvatar) ? item.customerAvatar  : `${shopImgUrl}${item.customerAvatar}`"
								 mode="aspectFill"></image>
							</view>
							<view class="flex-1 flex flex_column">
								<view class="pl-left-title">{{item.customerName}}</view>
								<view class="pl-left-info">
									<text v-for="(item2,index2) in handleArr2(item.productSku)" :key="index2">
										{{item2.specification}}: {{item2.value}}
									</text>
								</view>
							</view>
						</view>
						<view class="pl-right ">
							<view class="pl-right-time">
								{{item.createTime}}
							</view>
							<view class="pl-right-start">
								<image class="tp-img32 tp-ml10" v-for="(item4,index4) in (item.score - 0)" :key="index4" src="../static/start4.png"
								 mode="widthFix"></image>
								<image class="tp-img32 tp-ml10" v-for="(item3,index3) in 5 - (item.score - 0)" :key="index3" src="/pagesShop/static/start3.png"
								 mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="pl-bottom">
						{{item.content}}
					</view>
					<view class="pl-imgs">
						<image v-for="(item1, index1) in item.imgArr" :key="index1" @click="previewImg(item1,item.imgArr)" :src="item1" :style="{marginRight:(index1 + 1) % 4 == 0 ? '0' : '30rpx' }"
						 mode="aspectFill"></image>
					</view>
				</view>
				<uni-load-more color="#999" :status="status" v-if="list.length > 0"></uni-load-more>
			</view>
			<view class="nomore" v-if="list.length === 0 && !loading">
				<view class="nomore-text">
					<image src="/pagesShop/static/zanwu.png" mode="widthFix"></image>
					<view>暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cid: '',
				currentIndex1: 0,
				evaluationLabel: '',
				page: 1,
				status: 'more',
				loading: false,
				list: [],
				list1: [],
			}
		},
		onLoad(params) {
			console.log(params);
			this.cid = params.cid
			this.getList1()
			this.getList2()
		},
		onPullDownRefresh() {
			this.getList1()
			this.getList2()
		},
		onReachBottom() {
			this.getList1_1()
		},
		methods: {
			handleArr1(str) {
				if (typeof str === 'string' && str !== '') {
					return str.split(',')
				} else {
					return []
				}
			},
			handleArr2(str) {
				console.log(str);
				if (typeof str === 'string' && str !== '') {
					let arr = []
					try {
						arr = JSON.parse(str)
					} catch (e) {
						//TODO handle the exception
					}
					return arr
				} else {
					return []
				}
			},
			selectTag(item, index) {
				this.currentIndex1 = index
				this.evaluationLabel = index > 0 ? item.id : ''
				this.getList1()
			},
			// 评价查询
			getList1() {
				this.page = 1
				this.status = 'more'
				this.loading = true
				this.$http.post(this.$api.shop_list_2, {}, {
					params: {
						pageNum: this.page,
						id: this.cid, // 商品id
						evaluationLabel: this.evaluationLabel, // 标签id
					}
				}).then((result) => {
					uni.stopPullDownRefresh()
					this.loading = false
					if (result.code === 200) {
						result.data.result.map(item => {
							if (item.evaluationImg) {
								let arr = item.evaluationImg.split(',')
								let newarr = []
								item.imgArr = []
								arr.forEach(item => {
									if (!item.startsWith('http')) {
										item = this.$imgUrl + item

									}
									newarr.push(item)
								})
								item.imgArr = newarr
							}
						})

						const list = result.data.result;
						if (Array.isArray(list) && list.length > 0) {
							this.list = list.map(item => {
								item.score = (parseInt(item.score) || 0) > 5 ? 5 : parseInt(item.score)
								return item
							})
							if (this.list.length < 10) {
								this.status = 'noMore'
							}
						} else {
							this.list = []
							this.status = 'more'
						}
					} else {
						this.list = []
						this.status = 'more'
					}
				}).catch(() => {
					this.loading = false
					this.list = []
					this.status = 'more'
				})
			},
			// 评价查询
			getList1_1() {
				if (this.status === 'noMore') return
				this.page++
				this.status = 'loading'
				this.$http.post(this.$api.shop_list_2, {}, {
					params: {
						pageNum: this.page,
						id: this.cid, // 商品id
						evaluationLabel: this.evaluationLabel, // 标签id
					}
				}).then(result => {
					if (result.code === 200) {
						const list = result.data.result;
						if (Array.isArray(list)) {
							if (list.length > 0) {
								list = list.map(item => {
									item.score = (parseInt(item.score) || 0) > 5 ? 5 : parseInt(item.score)
									return item
								})
								this.list = this.list.concat(list);
							} else {
								this.status = 'noMore'
							}
						} else {
							this.status = 'more'
						}
					}
				}).catch(() => {
					this.status = 'more'
				})
			},
			// 预览图片
			previewImg(url, arr) {
				console.log(url);
				// let arr = []
				// this.list
				uni.previewImage({
					current: url,
					urls: arr,
					success: function() {
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 评价标签
			getList2() {
				this.$http.get(this.$api.shop_tags, {
					type: 400,
					productId: this.cid
				}).then((result) => {
					if (result.code === 200) {
						const list = result.data;
						if (Array.isArray(list) && list.length > 0) {
							this.list1 = [{
								value: '全部'
							}].concat(list)
						} else {
							this.list1 = []
						}
					} else {
						this.list1 = []
					}
				}).catch(() => {
					this.list1 = []
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fixed-tags {}

	.fixed-tag {
		display: inline-block;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		margin: 0 20rpx 20rpx 0;
		background-color: #ebebeb;
		border-radius: 30rpx;

		&.active {
			background-color: #feedec;
			color: #666;
		}
	}

	.fixed-tool-top {
		// position: fixed;
		// top: calc(var(--status-bar-height) + 44px);
		// left: 0;
		// width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
	}

	.pl-content {
		padding: 10rpx 30rpx;
		margin: 30rpx 0;
		background-color: #fff;
	}

	.pl-row {
		margin: 20rpx 0;
	}

	.pl-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.pl-bottom {
		color: #666;
		line-height: 1.5;
	}

	.pl-left {
		display: flex;
		align-items: center;
	}

	.pl-left-img {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
	}

	.pl-left-title {
		font-size: 26rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.pl-left-info {
		color: #999;
		font-size: 24rpx;

		text {
			margin-right: 20rpx;
		}
	}

	.pl-right-start {
		display: flex;
		justify-content: flex-end;

		image {
			width: 25rpx;
			height: auto;
		}
	}

	.pl-right-time {
		color: #666;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.pj-tags {
		display: flex;
		margin-top: 30rpx;
	}

	.pj-tag {
		background-color: #feedec;
		color: #666;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		margin: 0 20rpx 20rpx 0;
	}

	.pl-imgs {
		margin-top: 20rpx;
		display: flex;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}
</style>
